<template>
  <!-- 新增企业印章company 新增法人章legalPerson -->
  <div class="sealAdmin">
    <div class="padding15All flexbetween" style="height:50px;box-sizing:border-box;border-bottom:2px solid #F5F6F7">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{name:'sealAdminBusiness'}">印章管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增企业印章</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="height:15px;background-color: #F5F6F7;"></div>
    <div class="padding15All">
      <el-form v-if="type === 'company'" label-position="top" ref="addCompanySealRef" :model="addCompanySeal" :rules="addCompanySealRules">
        <div class="title-form">
          <span>新增企业印章</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="印章名称" prop="sealName">
              <el-input v-model="addCompanySeal.sealName" maxlength="15" placeholder="请输入" show-word-limit
                        style="width: 80%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="印章类型" prop="sealType">
              <el-select v-model="addCompanySeal.sealType" placeholder="请选择" style="width: 80%" value="1">
                <el-option label="企业章" value="3"></el-option>
                <el-option label="合同章" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="横向文" prop="transverseTxt">
              <el-input @blur="pagePreviewSeal" v-model="addCompanySeal.transverseTxt" maxlength="15" placeholder="请输入" show-word-limit
                        style="width: 80%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下弦文" prop="bottomChordTxt">
              <el-input @blur="pagePreviewSeal" v-model="addCompanySeal.bottomChordTxt" maxlength="15" placeholder="请输入" show-word-limit
                        style="width: 80%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="环绕文" prop="mainFont">
              <el-input v-model="addCompanySeal.mainFont" disabled style="width: 35%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="sealTemplate">
            <el-form-item label="印章模板" prop="sealShapeType">
              <div class="templateBox">
                <el-radio @input="pagePreviewSeal" v-model="addCompanySeal.sealShapeType" label="0" style="display: flex;align-items: flex-end">
                  <div class="flexcolumn flexcenter">
                    <div style="width: 80px;height: 80px;display: inline-block">
                      <img
                        alt=""
                        src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/yxz_new.914df624.png"
                        style="width: 100%;height: 100%">
                    </div>
                    <div style="margin-top: 10px">圆形章-五角星</div>
                  </div>
                </el-radio>
                <el-radio @input="pagePreviewSeal" v-model="addCompanySeal.sealShapeType" label="1" style="display: flex;align-items: flex-end">
                  <div class="flexcolumn flexcenter">
                    <div style="width: 88px;height: 55px;display: inline-block">
                      <img
                        alt=""
                        src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/twzt_new.815a4176.png"
                        style="width: 100%;height: 100%">
                    </div>
                    <div style="margin-top: 10px">椭圆章</div>
                  </div>
                </el-radio>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="印章颜色" prop="sealColor" style="margin-top: 35px">
              <el-radio @input="pagePreviewSeal" v-model="addCompanySeal.sealColor" label="0">
                <div style="width: 20px;height: 20px;background-color: #EA0014;display: inline-block"></div>
              </el-radio>
              <el-radio @input="pagePreviewSeal" v-model="addCompanySeal.sealColor" label="2">
                <div style="width: 20px;height: 20px;background-color: #0030FF;display: inline-block"></div>
              </el-radio>
              <el-radio @input="pagePreviewSeal" v-model="addCompanySeal.sealColor" label="1">
                <div style="width: 20px;height: 20px;background-color: #000000;display: inline-block"></div>
              </el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 25px">
          <el-col :span="8">
            <div style="width: 50%">
              <el-form-item label="印章预览">
                <el-image :src="sealView" alt="" style="width: 150px;height: 150px" v-loading="sealViewLoading"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="16"></el-col>
        </el-row>
        <el-form-item>
          <div>
            <el-button @click="goBack">返回</el-button>
            <el-button :loading="addSealLoading" type="primary" @click="submitSeal">确认</el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-form v-else-if="type === 'legalPerson'" label-position="top" ref="addLegalPersonSealRef" :model="legalPersonModel">
        <div class="title-form">
          <span>新增法人印章</span>
        </div>
        <el-form-item label="企业名称">
          <el-input v-model="legalPersonModel.enterpriseName" disabled placeholder="请输入"
                    style="width: 35%"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码/工商注册号">
          <el-input v-model="legalPersonModel.creditCode" disabled placeholder="请输入" style="width: 35%"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名">
          <el-input v-model="legalPersonModel.legalPerson" disabled placeholder="请输入" style="width: 35%"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-input disabled style="width: 35%" value="大陆身份证"></el-input>
        </el-form-item>
        <el-form-item label="法人证件号">
          <el-input v-model="legalPersonModel.legalIdNumber" disabled placeholder="请输入"
                    style="width: 35%"></el-input>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button @click="goBack">返回</el-button>
            <el-button :loading="addSealLoading" type="primary" @click="submitSeal">保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addCorporateSeal, addLegalPersonSeal, getAllEnterprise, previewSeal } from "@/api/business";
import Cookies from "js-cookie";

export default {
  data() {
    return {
      radio: "",
      type: this.$route.query.type || "",
      enterpriseId: localStorage.getItem("companyid") || "",
      enterpriseName: localStorage.getItem("bussinesname") || "",
      legalPersonModel: {
        enterpriseName: null,
        creditCode: null,
        legalPerson: null,
        legalIdNumber: null
      },
      addCompanySeal: {
        sealName: "",
        sealType: "",
        transverseTxt: "",
        bottomChordTxt: "",
        mainFont: "",
        sealShapeType: "0",
        sealColor: "0"
      },
      addCompanySealRules: {
        sealName: [{ required: true, message: "请输入印章名称", trigger: "blur" }],
        sealType: [{ required: true, message: "请选择印章类型", trigger: "blur" }],
        transverseTxt: [{ required: true, message: "请输入横向文", trigger: "blur" }],
        bottomChordTxt: [{ required: true, message: "请输入下弦文", trigger: "blur" }],
        mainFont: [{ required: true, message: "请输入环绕文", trigger: "blur" }],
        sealShapeType: [{ required: true, message: "请选择印章模板", trigger: "blur" }],
        sealColor: [{ required: true, message: "请选择印章颜色", trigger: "blur" }]
      },
      addSealLoading: false,
      canvasDom: null,
      sealView: '',
      sealViewLoading: false
    };
  },
  mounted() {
    this.init();
    this.addCompanySeal.mainFont = this.enterpriseName;
  },
  methods: {
    previewSeal,
    init() {
      if (this.type === "legalPerson") {
        this.pageGetAllEnterprise();
      } else if (this.type === "company") {
        this.pagePreviewSeal()
      }
    },
    pageGetAllEnterprise() {
      getAllEnterprise({ userId: Cookies.get("admin_id"), enterpriseId: this.enterpriseId }).then(res => {
        this.legalPersonModel = res.result[0];
      });
    },
    pagePreviewSeal(){
      this.sealViewLoading = true
      this.$nextTick(()=>{
        this.previewSeal({...this.addCompanySeal}).then(res=>{
          this.sealViewLoading = false
          this.sealView = 'data:image/gif;base64,' + res.message
        })
      })
    },
    postAddCorporateSeal() {
      this.$refs.addCompanySealRef.validate(bool => {
        if (bool) {
          this.addSealLoading = true;
          addCorporateSeal({
            ...this.addCompanySeal,
            enterpriseId: this.enterpriseId,
            userId: Cookies.get("admin_id")
          }).then(res => {
            this.addSealLoading = false;
            if (res.code === 200) {
              this.$message.success("添加成功");
              setTimeout(() => {
                this.goBack();
              }, 1000);
            }
          });
        }
      });
    },
    async postAddLegalPersonSeal() {
      this.addSealLoading = true;
      let res = await addLegalPersonSeal({ enterpriseId: this.enterpriseId, userId: Cookies.get("admin_id") })
      console.log('resres',res);
      this.addSealLoading = false;
      if (res.code === 200) {
        this.$message.success("添加成功");
        setTimeout(() => {
          this.goBack();
        }, 1000);
      }
    },
    goBack() {
      this.$router.replace({
        path: "/business/SealAdminBusiness"
      });
    },
    submitSeal() {
      if (this.type === "company") {
        this.postAddCorporateSeal();
      } else if (this.type === "legalPerson") {
        this.postAddLegalPersonSeal();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sealAdmin {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  .title-form {
    color: #1c1c1c;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .title-form:before {
    content: "";
    width: 3px;
    height: 16px;
    margin-right: 10px;
    background: #ea0014;
  }

  .sealTemplate {
    .templateBox {
      display: flex;
      align-items: flex-end;
    }
  }
}
</style>